<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生成绩表格</title>
</head>
<style>
    h1 {
        text-align: center;
    }

    #datalist {
        width: 600px;
        margin: auto;
    }

    table {
        border: 1px solid  blue;
        border-collapse: collapse;
        width: 100%;
    }

    table thead {
        text-align: left;
    }

    th,td {
        border: 1px solid blue;
        padding: 5px 10px;
        text-align: center;
    }
</style>
<body>
 <h1>成绩表</h1>
 <div id="datalist">
    <table>
        <thead>
            <tr>
                <th>学号</th>
                <th>语文</th>
                <th>数学</th>
                <th>英语</th>
                <th>总成绩</th>
                <th>备注</th>
            </tr>
        </thead>
        <tbody> 
            <!-- <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>  -->
        </tbody> 
    </table>
</div>
<script>
 var score = [
    //  输入各科分数
            {
                number: 1,
                chinese: 105,
                math: 62,
                english: 118,
            }, 
            {
                number: 2,
                chinese: 89,
                math: 78,
                english: 120,
            }, 
            {
                number: 3,
                chinese: 86,
                math: 64,
                english: 80,
            }, 
            {
                number: 4,
                chinese: 78,
                math: 99,
                english: 91,
            },
            {
                number: 5,
                chinese: 107.5,
                math: 97,
                english: 70,
            }, 
            {
                number: 6,
                chinese: 112,
                math: 61,
                english: 92,
            }, 
            {
                number: 7,
                chinese: 101,
                math: 79,
                english: 104,
            }, 
            {
                number: 8,
                chinese: 71,
                math: 72,
                english: 105,
            },
            {
                number: 9,
                chinese: 56,
                math: 68,
                english: 61,
            }, 
            {
                number: 10,
                chinese: 98,
                math: 83,
                english: 77,
            }
        ]
//利用对象 和数组的结合
// var stu = [
//     {xuehao:1,name:'zhangsan',chinese:105,math:62,english:118},
//     {xuehao:2,name:'lisi',chinese:89,math:78,english:120}
// ]
        var tbody = document.getElementsByTagName('tbody')[0];
        // 获取tbody
        for (var i = 0; i < score.length; i++) {
        score[i].total = score[i].chinese + score[i].math + score[i].english;
        }
        // 给每一个学生总成绩添加total属性
        // 【8】arr.sort() 没有参数的时候会按照ASCII 的编码排序
        // 按照数据的大小排序 需要给sort 添加 一个参数 为函数
        // 这个函数里面需要 两个参数 a  和 b
        // 这个函数还要有返回值 return a - b 得到的时候升序
        // return b - a 得到一个降序
        var chinese = score.sort(function (a, b) {
            return b.chinese - a.chinese;
            // 语文成绩第一
        })[0];
        var math = score.sort(function (a, b) {
            return b.math - a.math;
        })[0];
        // 数学成绩第一

        var english = score.sort(function (a, b) {
            return b.english - a.english;
        })[0];
        // 英语成绩最高
        score.sort(function (a, b) {
            return b.total - a.total;
        });
        // 总成绩排序
        for (var j = 0; j< score.length; j++) {
            var tip = '';
            if (score[j].chinese === chinese.chinese) {
                tip='语文第一名';
            }
            if (score[j].math === math.math) {
                tip = '数学第一名';
            }
            if (score[j].english === english.english) {
                tip = '英语第一名';
            }
            var str = '<tr>' +
                // 按照成绩渲染数据
                '<td>' + score[j].number + '</td>' +
                '<td>' + score[j].chinese + '</td>' +
                '<td>' + score[j].math + '</td>' +
                '<td>' + score[j].english + '</td>' +
                '<td>' + score[j].total + '</td>' +
                '<td>' + tip + '</td></tr>';
            // 根据各学科的最高成绩的学生写备注
            // 英语成绩最高显示英语成绩最高
            tbody.innerHTML += str;
            }
</script>
</body>
</html>